<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        .all{
            width:1060px;
            height: 800px;
            background:#333 url("images/bg.png")
        }
        .left{
            width:350px;
            height:800px;
            
        }
        .nav-left{
            top:10px;
            width:350px;
            height:44px;
            position: relative;
            background:#333 url("images/t1.png")  repeat-x;

            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        .nav-left img{
            margin-left: 0;
            width:100px;
            height:40px;
            position: absolute;
            top:50%;
            margin-top: -20px;
        }
        .shop{
            top:1px;
            width:350px;
            height:60px;
            background:#333 url("images/sideBg.png")  repeat-x;
            position: relative;
            margin-top:10px;
        }
        .shop img{
            width:20px;
            height:20px;
        }

        .user{
            position: absolute;
            top:6px;
            left:15px;
        }
        .time{
            position: absolute;
            top:32px;
            left:15px;
        }

        .shop span{
            font-size: 15px;
            color:ghostwhite;
            padding-left: 40px;
        }
        .black{
            position: absolute;
            top:5px;
        }
        .clock{
            position: absolute;
            top:31px;
        }

        .money{
            top:2px;
            width:350px;
            height: 52px;
            background:#333 url("images/bg3.png")  repeat-x;
            position: relative;
        }
        .money img{
            width:20px;
            height: 20px;
            position: absolute;
            left:15px;
            top: 38%;
            margin-top: -7.5px;
        }
        .money span{
            position: absolute;
            color:white;
            top:20%;
            left:40px;
        }


        .menu{
            position: relative;
            width:350px;
            height: 500px;
            background:#fff url("images/shouzibg.png");
            top:-6px;
        }

        .menu-top{
            width:350px;
            height: 210px;
            background-color:#EEE4D1;
            overflow: hidden;            
        }

        .menu-top img{
            position: absolute;
            width:18px;
            height:18px;
            top:137px;
            left:10px;
           
        }

        .menu-top div{
            float:left;
            position: relative; 
        }
        .menu-top span{
            padding-right: 30px;
            line-height: 40px;
        }
        .menu-one,.menu-two,.menu-three,.menu-four,.menu-five{
            position: absolute;
            left: 0;
            width:350px;
            height:40px;
            border-bottom: 2px solid #C1AC97;       
        }
        .one{
            position: absolute;
            left:30px;
            width:65px;
            padding-right: 30px;

        }
        .two{
            position: absolute;
            left:110px;
            width: 50px;
            text-align: right; 
        }
        
        .three{
            position: absolute;
            left:180px;
            width: 55px;
            text-align: right; 
        }
        .four{
            position: absolute;
            left:250px;
            width: 55px;
            text-align: right; 
        }
        
      

        .table-right{
            position: absolute;
            right:0;
            background-color:  rgb(48,46,46);
            width:40px;
            height:602px;
            top:0;
            opacity: 0.6;
            text-align: center;
            z-index: 102;
        }
        .table-right img{
            margin:10px;
            margin-left: auto;
            margin-right: auto;
        }
        .bottom{
            position: relative;
            background-color: #F3E7BF;  
            margin-top:150px;
            width:350px;
            height:150px;
        }

        .allmoney{
            width:230px;
            height: 50px;       
            position: absolute;
            top:30px;
            left:20px;   
            background-color:rgb(236, 225, 180);  
           
        }


        .bottom-one{
            position: absolute;
            font-size: 25px;
            color:red;
            left:0;
            line-height: 50px;
           
        }
        .bottom-two{
            position: absolute;
            font-size: 25px;
            color:red;
            right:0;
            line-height: 50px;
        }

        .text{
            position: absolute;
            width:230px;
            height: 30px;
            border-radius: 10px;
            top:95px;
            left:8px;
            padding-left: 10px;
            text-align: center;
            border:1px solid gray;
        }

        .search{
            position: absolute;
            top:102px;
            left:18px;
            font-size: 10px;
            color:gray;
        }

        .wrong{
            position: absolute;
            top:101px;
            left:222px;        
        }

        .test{
            position: absolute;
            width:30px;
            height: 30px;
            top:95px;
            left:255px;
            border-radius: 12px;
            border:1px solid gray;
        }
        .sousuo{
            width:15px;
            height: 15px;
            position: absolute;
            top:102px;
            left:263px;
        }
        .message{
            font-size: 18px;
            color:white;
            margin-top: 10px;
        }









        .right{
            width:700px;
            height:800px;
            position:absolute;
            left:360px;
            top:0;
            float:left;
        }

        .nav-right{
            top:10px;
            width:700px;
            height:44px;
            position: absolute;
            left:0;
            background:#333 url("images/t1.png")  repeat-x;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        .kind{
            width:700px;
            height:60px;
            position: relative;
            overflow: hidden;
            margin-top: 71px;
            margin-left: 60px;
            text-align: center;

        }
        .kind div{
            width:100px;
            height:40px;
            float: left;
            margin-right: 6px; 
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        .kind-one{
            background-color: #C6412E;
            color:white;
        }
        .kind-two,.kind-three,.kind-four,.kind-five{
            background-color: #ECBD85;
            color:#88491D;
        }

     
        .kind span{
            line-height: 40px;
        }

        .btn{
            width:50px;
            height: 40px;
            position: absolute;
            background-color: #ECBD85;
            border: none;
            right:120px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }


        .notebook{
            width:690px;
            height: 560px;
            background:#fff url("images/bg5.png") repeat-y;
            border:1px solid gray;
            position: absolute;
            left:0;
            top:111px;
            border-radius: 15px;       
        }

        .underline{
            width:570px;
            height: 50px;
            margin-top: 30px;
            border-top: 3px solid red;
            position: absolute;
            left:90px;

        }
        .underline::before{
            content:"";
            display: table;
        }

        .dangao{
            width:570px;
            height:80px;
            position: absolute;
            overflow: hidden;
            margin-left: 90px;
            margin-top: 50px;

        }

        .dangao div{
            position: relative;
            width:100px;
            height:70px;
            float: left;
            margin-right:11.25px;
            box-shadow: rgb(214, 134, 134) 3px 4px 5px 1px;
           
        }

        .dangaoone,.dangaofour,.dangaofive{
            border:1px solid  #F8EEE6;
        }

        .dangaothree{
            border:1px solid  #F8EEE6;
            position: absolute;
            margin-right: 13px;
        }

        .dangao-one{
            position: absolute;
            top:15px;
            left:15px;
            color:#CA5445;
        }

        .dangao-two{
            position: absolute;
            top:35px;
            color:#ADADAC;
            left:15px;
            font-size: 15px;
        }
        .dangaotwo{
            border: 2px solid #CC3333;
        }

        .pic{
            width:630px;
            height:80px;
            position: absolute;
            overflow: hidden;
            margin-left: 50px;
            margin-top: 570px;
        }
        .pic div:not(:last-child){
            position: relative;
            width:50px;
            height:50px;
            float: left;
            margin-right:25px;
            /* background-color: red; */
           
        }


        .shezhi{
            background-color: #66B92E;
            border-radius: 100%;
        }
        .gouwu{
            background-color:#3399CC;
            border-radius: 100%;
        }
        .huiyuan{
            background-color:#6699FF;
            border-radius: 100%;   
        }
        .cuxiao{
            background-color:#CC66CC;
            border-radius: 100%; 
        }
        .yuding{
            background-color:#996666;
            border-radius: 100%; 
        }
        .jiaoban{
            background-color:#FF9700;
            border-radius: 100%; 
        }
        .guadan{
            background-color:#FF6666;
            border-radius: 100%;
        }
        .shezhi-one,.gouwu-one,.huiyuan-one,.cuxiao-one,.yuding-one,.jiaoban-one,.guadan-one{           
            width:30px;
            height:30px;
            position: absolute;
            top:10px;
            left:10px;
        }    
        .shezhi-two,.gouwu-two{
           position: absolute;
           top:55px;
           color:white;
       }

       .huiyuan-two,.cuxiao-two,.yuding-two,.jiaoban-two,.guadan-two{
           position: absolute;
           top:55px;
           color:white;
           left:8px;
       }
       .shouyin{
           position: absolute;
           width:120px;
           height:60px;
           background-color: #C43F2B;
           right:0;
       }
       .shouyin img{
           position: absolute;
           width:40px;
           height:40px;
           left:10px;
           top:10px;
       }
       .shouyin span{
           position: absolute;
           top:15px;
           left:50px;
           color:#EBD5B9;
           font-size: 20px;
       }
        
    </style>
</head>
<body>
    <div class="all">

        <div class="left">
            <div class="nav-left">
                <img src="images/组-18.png" alt="">
            </div>
            <div class="shop">
                <img class="user" src="images/user.png" alt="">
                <span class="black">黑侠（光谷店）</span><br>
                <img class="time" src="images/time.png" alt="">
                <span class="clock">2020-09-28&nbsp&nbsp&nbsp14:27&nbsp&nbsp&nbspAM</span>
            </div>
            <div class="money">
                <img src="images/shouzhi.png" alt="">
                <span>收支明细</span>
            </div>
            <div class="menu">
                <div class="menu-top">
                    <img src="images/赠.png" alt="">
                    <div class="menu-one">
                        <span class="one">品名</span>
                        <span class="two">数量</span>
                        <span class="three">金额</span>
                        <span class="four">结算价</span>
                    </div><br>
                   
                    <div class="menu-two">
                        <span class="one">蛋挞</span>
                        <span class="two">5</span>
                        <span class="three">60</span>
                        <span class="four">60</span>
               
                    </div><br>
                    
                    <div class="menu-three">
                        <span class="one">全麦面包</span>
                        <span class="two">1</span>
                        <span class="three">10.5</span>
                        <span class="four">10.5</span>
                     
                    </div><br>
    
                    <div class="menu-four">
                        <span class="one">戚风蛋糕</span>
                        <span class="two">1</span>
                        <span class="three">20</span>
                        <span class="four">0</span>
                    </div><br>

                    <div class="menu-five">
                        <span class="one">三明治</span>
                        <span class="two">5</span>
                        <span class="three">60</span>
                        <span class="four">60</span>
                    </div>
        
                </div>
                <div class="table-right">
                    <img src="images/关闭.png" alt="">
                    <img src="images/增加.png" alt="">
                    <img src="images/赠送.png" alt="">
                    <img src="images/修改.png" alt="">
                    <img src="images/椭圆-12.png" alt="">
                    <img src="images/椭圆-12-拷贝.png" alt="">
    
                </div> 
                <div class="bottom">
                    <div class="allmoney">
                        <span class="bottom-one">总额</span>
                        <span class="bottom-two">￥125.5</span>
                    </div>
                    <input class="text" type="text">
                    <span class="search">搜索商品</span>
                    <img class="wrong" src="images/Layer-6.png" alt="">
                    <input class="test" type="test">
                    <img class="sousuo" src="images/sousuo.png" alt="">
                </div> 
                <div class="message">
                    <span>会员信息:</span>
                </div>
                
                
            </div>
        </div>


        <div class="right">
            <div class="nav-right"></div>
            <div class="kind">
                <div class="kind-one">
                    <span>戚风蛋糕</span>
                </div>
                <div class="kind-two">
                    <span>蛋挞</span>
                </div>
                <div class="kind-three">
                    <span>全麦面包</span>
                </div>
                <div class="kind-four">
                    <span>戚风蛋糕</span>
                </div>
                <div class="kind-five">
                    <span>三明治</span>
                </div>
                <button class="btn">
                    <img class="fanhui" src="images/fanhui.png" alt="">
                </button>
            </div>
            <div class="notebook">
                <div class="underline"></div>
                <div class="dangao">
                    <div class="dangaoone">
                        <img class="other" src="images/互动图标.png" alt="">
                        <span class="dangao-one">0001</span><br>
                        <span class="dangao-two">巧克力蛋糕</span>
                    </div>
                    <div class="dangaotwo">
                        <span class="dangao-one">0001</span><br>
                        <span class="dangao-two">巧克力蛋糕</span>
                    </div>
                    <div class="dangaothree">
                        <span class="dangao-one">0001</span><br>
                        <span class="dangao-two">巧克力蛋糕</span>
                    </div>
                    <div class="dangaofour">
                        <span class="dangao-one">0001</span><br>
                        <span class="dangao-two">巧克力蛋糕</span>
                    </div>
                    <div class="dangaofive">
                        <span class="dangao-one">0001</span><br>
                        <span class="dangao-two">巧克力蛋糕</span>
                    </div>
                </div>
            </div>

            <div class="pic">
                <div class="shezhi">
                    <img class="shezhi-one" src="images/shezhi.png" alt="">   
                    <span class="shezhi-two">管理台</span>    
                </div>
                <div class="gouwu">
                    <img class="gouwu-one" src="images/gouwuqia.png" alt="">
                    <span class="gouwu-two">购物卡</span>
                </div>
                <div class="huiyuan">
                    <img class="huiyuan-one" src="images/huiyuan.png" alt="">
                    <span class="huiyuan-two">会员</span>
                </div>
                <div class="cuxiao">
                    <img class="cuxiao-one" src="images/cuxiao.png" alt="">
                    <span class="cuxiao-two">促销</span>
                </div>
                <div class="yuding">
                    <img class="yuding-one" src="images/yuding.png" alt="">
                    <span class="yuding-two">预定</span>
                </div>
                <div class="jiaoban">
                    <img class="jiaoban-one" src="images/jiaoban.png" alt="">
                    <span class="jiaoban-two">交班</span>
                </div>
                <div class="guadan">
                    <img class="guadan-one" src="images/xingzhuang.png" alt="">
                    <span class="guadan-two">挂单</span>
                </div>
                <div class="shouyin">
                    <img src="images/jinqian.png" alt="">
                    <span>收银</span>
                </div>
            </div>
        </div>

    </div>
    
</body>
</html>